<template>
  <div class="czr-ellipsis" ref="ref_main">
    <div class="czr-ellipsis-temp" ref="ref_temp">{{value}}</div>
    <el-tooltip
      :disabled="!state.isEllipsis"
      :content="String(value)"
      placement="top"
      popper-class="__cus-popover"
    >
      <div class="__text-ellipsis">{{value}}</div>
    </el-tooltip>
  </div>
</template>

<script setup lang="ts">
defineOptions({
  name: 'CzrEllipsis',
});
import {
  ref,
  reactive,
  watch,
  nextTick
} from 'vue'
const props = defineProps({
  value: {
    required: true,
    default: '',
  },
  always: {default: false}
})
const state = reactive({
  isEllipsis: false
})
const ref_main = ref()
const ref_temp = ref()
watch(() => props.value, (n) => {
  if (n) {
    nextTick(() => {
      state.isEllipsis = props.always || ref_temp.value?.clientWidth > ref_main.value?.clientWidth
    })
  }
}, {immediate: true})
</script>

<style scoped lang="scss">
  .czr-ellipsis {
    width: 100%;
    .czr-ellipsis-temp {
      word-break: break-all;
      white-space: nowrap;
      position: absolute;
      visibility: hidden;
    }
  }
</style>
